<template>
  <div id="config-gateway-head">
    <div class="bg-color-fff">
      <p class="title-pad20">网关环境基本信息</p>
      <el-form :model="gwInfoForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-row>
          <el-col :push=2 :span=10>
            <el-form-item label="网关编号:" prop="gwEnvCode">
              <el-input v-model="gwInfoForm.gwEnvCode" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push=2 :span=10>
            <el-form-item label="网关名称:" prop="gwEnvName">
              <el-input v-model="gwInfoForm.gwEnvName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push=2 :span=10>
            <el-form-item label="网关外部地址:" prop="gwEnvUrl">
              <el-input v-model="gwInfoForm.gwEnvUrl" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push=2 :span=10>
            <el-form-item label="网关部署地址:" prop="gwEnvAddress">
              <el-input v-model="gwInfoForm.gwEnvAddress" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push=2 :span=10>
            <el-form-item label="网关环境描述:" prop="gwEnvDesc">
              <el-input v-model="gwInfoForm.gwEnvDesc" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 报文头定义-请求参数 -->
    <div class="marigin-top10 bg-color-fff">
      <div>
        <p class="title-pad20">报文头定义-请求参数</p>
        <el-button class="btn-float-r" type="primary" size="mini" @click="addgwErrData('01')">新增</el-button>
      </div>
      <el-table :data="reqData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fieldCode" label="参数"></el-table-column>
        <el-table-column prop="fieldType" label="类型"></el-table-column>
        <el-table-column prop="fieldRequired" label="是否必输">
          <template slot-scope="scope">
            {{scope.row.fieldRequired | capitalize }}
          </template>
        </el-table-column>
        <el-table-column prop="fieldLength" label="长度"></el-table-column>
        <el-table-column prop="fieldName" label="描述"></el-table-column>
        <el-table-column prop="fieldEncoding" label="编码"></el-table-column>
        <el-table-column prop="fieldDefVal" label="示例值"></el-table-column>
        <el-table-column prop="fieldPattern" label="检查规则"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="reqHandleEdit(scope.$index, scope.row, 'b1')">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 报文头定义-响应参数 -->
    <div class="marigin-top10 bg-color-fff">
      <div class="line-height40">
        <p class="title-pad20">报文头定义-响应参数</p>
        <el-button class="btn-float-r" type="primary" size="mini" @click="addgwErrData('02')">新增</el-button>
      </div>
      <el-table :data="resData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fieldCode" label="参数"></el-table-column>
        <el-table-column prop="fieldType" label="类型"></el-table-column>
        <el-table-column prop="fieldRequired" label="是否必输">
          <template slot-scope="scope">
            {{scope.row.fieldRequired | capitalize }}
          </template>
        </el-table-column>
        <el-table-column prop="fieldLength" label="最大长度"></el-table-column>
        <el-table-column prop="fieldName" label="描述"></el-table-column>
        <el-table-column prop="fieldEncoding" label="编码"></el-table-column>
        <el-table-column prop="fieldDefVal" label="示例值"></el-table-column>
        <el-table-column prop="fieldPattern" label="检查规则"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="resHandleEdit(scope.$index, scope.row, 'b2')">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 请求参数弹框 -->
    <el-dialog :title="editMode === 'ADD' ? '新建' : '修改'" :visible="editDialogShow" @close="closeDialog" width="900px">
      <el-form :model="gwHeadInfoForm" :rules="rules" ref="gwHeadInfoForm" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="参数" prop="fieldCode">
              <el-input v-model="gwHeadInfoForm.fieldCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="fieldType">
              <el-select popper-class="zIndex-popper" v-model="gwHeadInfoForm.fieldType" placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="是否必输" prop="fieldRequired">
              <el-select popper-class="zIndex-popper" v-model="gwHeadInfoForm.fieldRequired" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="长度" prop="fieldLength">
              <el-input v-model="gwHeadInfoForm.fieldLength"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="编码" prop="fieldEncoding">
              <el-input v-model="gwHeadInfoForm.fieldEncoding"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="示例值" prop="fieldDefVal">
              <el-input v-model="gwHeadInfoForm.fieldDefVal"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="检查规则" prop="fieldPattern">
              <el-input v-model="gwHeadInfoForm.fieldPattern"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="fieldName">
              <el-input v-model="gwHeadInfoForm.fieldName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <template>
          <div class="buttons-div">
            <div class="form-buttons">
              <el-button @click="reset">重置</el-button>
              <el-button @click="closeDialog('addDialog')">关闭</el-button>
              <!-- <el-button v-if="btnIndex" type="primary" @click="submitForm">确定</el-button> -->
              <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
          </div>
        </template>
      </el-form>
    </el-dialog>
    <!-- 响应参数弹框 -->
  </div>
</template>
<script>
import api from '../../../../../api/url'
import ajax from '../../../../../api/ajax/ajax'
// import { number } from '../../../../../assets/js/rules'
export default {
  data () {
    return {
      gwHeadInfoForm: {
        fieldCode: '',
        fieldType: '',
        fieldRequired: '',
        fieldLength: '',
        fieldEncoding: '',
        fieldDefVal: '',
        fieldPattern: '',
        fieldName: ''
      },
      gwInfoForm: {},
      reqData: [],
      resData: [],
      btnIndex: null,
      resP: [],
      reqP: [],
      reqModifyErrData: {},
      resModifyErrData: {},
      editSign: '',
      gwEnvId: '',
      editDialogShow: false,
      editMode: 'ADD',
      idx: '',
      options: [{
        value: true,
        label: '是'
      }, {
        value: false,
        label: '否'
      }],
      types: [{
        value: 'string',
        label: 'string'
      }, {
        value: 'int',
        label: 'int'
      }, {
        value: 'long',
        label: 'long'
      }, {
        value: 'double',
        label: 'double'
      }, {
        value: 'decimal',
        label: 'decimal'
      }, {
        value: 'date',
        label: 'date'
      }, {
        value: 'time',
        label: 'time'
      }, {
        value: 'datetime',
        label: 'datetime'
      }, {
        value: 'list',
        label: 'list'
      }],
      rules: {
        fieldCode: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        fieldType: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        fieldRequired: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        fieldLength: [
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '长度必须为数字' }
        ],
        fieldEncoding: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        fieldDefVal: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        fieldPattern: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        fieldName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  filters: {
    capitalize (value) {
      return value === true ? '是' : '否'
    }
  },
  methods: {
    // 请求的编辑
    reqHandleEdit (indx, data, flag) {
      this.editSign = flag
      this.idx = indx
      this.editMode = 'MODIFY1'
      this.editDialogShow = true
      this.reqModifyErrData = JSON.parse(JSON.stringify(data))
      this.gwHeadInfoForm = JSON.parse(JSON.stringify(this.reqModifyErrData))
      this.$nextTick(() => {
        this.$refs.gwHeadInfoForm.clearValidate()
      })
    },
    // 响应的编辑
    resHandleEdit (indx, data, flag) {
      this.editSign = flag
      this.idx = indx
      this.editMode = 'MODIFY2'
      this.editDialogShow = true
      this.resModifyErrData = JSON.parse(JSON.stringify(data))
      this.gwHeadInfoForm = JSON.parse(JSON.stringify(this.resModifyErrData))
      this.$nextTick(() => {
        this.$refs.gwHeadInfoForm.clearValidate()
      })
    },
    // 删除
    handleDelete (index, data) {
      this.$confirm('确定要删除吗', '提示', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let deleteData = {
          fieldId: data.fieldId,
          linkId: data.linkId
        }
        ajax.post(api.DELETE_GW_HEAD, deleteData).then(res => {
          if (res === 'success') {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          ajax.post(api.LIST_GW_LINKPACK, {gwEnvId: this.gwEnvId}).then(res => {
            this.resP = res
            this.reqData = res.reqPacketList
            this.resData = res.resPacketList
          })
        }).catch(err => {
            console.info(err)
          })
        }).catch(() => {
      })
    },
    // 新增
    addgwErrData (flag) {
      if (flag === '01') {
        this.btnIndex = true
      } else {
        this.btnIndex = false
      }
      this.editMode = 'ADD'
      this.editDialogShow = true
    },
    // 提交
    submitForm () {
      // this.gwInfoForm
      // this.gwInfoForm.reqPacketList =
      // this.gwInfoForm.resPacketList =
      this.$refs.gwHeadInfoForm.validate(valid => {
        if (valid) {
          if (this.editMode === 'ADD') {
            if (this.btnIndex === true) {
              this.gwInfoForm.reqPacketList = [] // 把请求的列表置空
              this.gwInfoForm.reqPacketList = this.resP.reqPacketList // 把原来就有的请求的列表数据赋值
              this.gwInfoForm.reqPacketList.push(this.gwHeadInfoForm) // 把新添的数据push进列表
              this.gwInfoForm.resPacketList = this.resP.resPacketList // 把原来就有的响应的列表数据赋值
            } else {
              this.gwInfoForm.resPacketList = [] // 把响应的列表置空
              this.gwInfoForm.resPacketList = this.resP.resPacketList // 把原来就有的响应的列表数据赋值
              this.gwInfoForm.resPacketList.push(this.gwHeadInfoForm) // 把新添的数据push进列表
              this.gwInfoForm.reqPacketList = this.resP.reqPacketList // 把原来就有的请求的列表数据赋值ßßß
            }
            ajax.post(api.SET_GW_KINK_PACKET, this.gwInfoForm).then(res => {
              if (res === 'success') {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
              }
              this.editDialogShow = false
              ajax.post(api.LIST_GW_LINKPACK, {gwEnvId: this.gwEnvId}).then(res => {
                this.resP = res
                this.reqData = res.reqPacketList
                this.resData = res.resPacketList
              })
            })
          } else {
            if (this.editMode === 'MODIFY1') { // 请求的编辑
              // this.gwInfoForm.reqPacketList = []
              this.gwInfoForm.reqPacketList = this.resP.reqPacketList
              this.gwInfoForm.reqPacketList[this.idx] = this.gwHeadInfoForm
              this.gwInfoForm.resPacketList = this.resP.resPacketList
            } else { // 响应的编辑
              this.gwInfoForm.resPacketList = this.resP.resPacketList
              this.gwInfoForm.resPacketList[this.idx] = this.gwHeadInfoForm
              this.gwInfoForm.reqPacketList = this.resP.reqPacketList
            }
            ajax.post(api.SET_GW_KINK_PACKET, this.gwInfoForm).then(res => {
              if (res === 'success') {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
              }
              this.editDialogShow = false
              ajax.post(api.LIST_GW_LINKPACK, {gwEnvId: this.gwEnvId}).then(res => {
                this.resP = res
                this.reqData = res.reqPacketList
                this.resData = res.resPacketList
              })
            })
          }
        }
      })
    },
    submitFormRes () {},
    // 关闭
    closeDialog () {
      this.editDialogShow = false
      this.gwHeadInfoForm = {}
      this.$refs.gwHeadInfoForm.resetFields()
    },
    // 重置
    reset () {
      if (this.editMode === 'ADD') {
        this.gwHeadInfoForm = {}
        this.$refs.gwHeadInfoForm.resetFields()
      } else {
        if (this.editSign === 'b1') {
          this.gwHeadInfoForm = JSON.parse(JSON.stringify(this.reqModifyErrData))
          setTimeout(() => {
            this.$refs.gwHeadInfoForm.clearValidate()
          })
        } else {
          this.gwHeadInfoForm = JSON.parse(JSON.stringify(this.resModifyErrData))
          setTimeout(() => {
            this.$refs.gwHeadInfoForm.clearValidate()
          })
        }
      }
    }
  },
  mounted () {
    this.$on('gwHead', ({selectData, id}) => {
      this.gwInfoForm = selectData
      this.gwEnvId = id
      ajax.post(api.LIST_GW_LINKPACK, {gwEnvId: id}).then(res => {
        this.resP = res
        this.reqData = res.reqPacketList
        this.resData = res.resPacketList
      }).catch(err => {
        console.info(err)
      })
    })
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #config-gateway-head
    padding-bottom 10px
    .bg-color-fff
      background #ffffff
      padding-bottom 20px
    .marigin-top10
      margin-top 10px
    .title-pad20
      display inline-block
      height: 40px
      line-height 40px
      padding-left 20px
    .btn-float-r
      float right
      margin-right 20px
      margin-top 6px
    // .el-form-item__label
    //   width 120px
    .el-select
    .el-input
      width 100%
    // .el-col-10
    //   margin-top 10px
    // .el-select > .el-input
    //   width 246px
    .buttons-div
      height 40px
    .form-buttons
      float right
</style>
